
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>首页</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css">

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!--导入布局js，共享header和footer-->
        <script type="text/javascript" src="js/include.js"></script>
        <script src="js/getParameter.js"></script>
        <!--        <script src="js/buttonclass.js"></script>-->

        <script>
            $(function () {
                var gname = getParameter("gname");

                //判断rname不为null或“”；
                if (gname) {
                    //url解码
                    gname = window.decodeURIComponent(gname);
                }


                //当页面加载完成之后，调用load方法，发送ajax请求加载数据
                load(null, gname)
            })

            function load(currentPage, gname) {
                $.get("game/pageQuery", {currentPage: currentPage, gname: gname}, function (pb) {
                    // alert(pb.totalPage)
                    $("#totalPage").html(pb.totalPage);
                    $("#totalCount").html(pb.totalCount);

                    /*    <nav aria-label="Page navigation" class="daoh">
                                <ul class="pagination" id="pageNum">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                           </nav>*/
                    var lis = "";
                    var beforeNum = pb.currentPage - 1;
                    if (beforeNum <= 0) {
                        beforeNum = 1;
                    }
                    // var beforePage = ' <li onclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                    var beforePage = '<li onclick="javascript:load(' + beforeNum + ',\'' + gname + '\')">\n' +
                        '                                        <a href="javascript:void(0)" aria-label="Previous">\n' +
                        '                                            <span aria-hidden="true">&laquo;</span>\n' +
                        '                                        </a>\n' +
                        '                                    </li>';

                    lis += beforePage;

                    /*
                 //1.2展示分页页码
                 1.一共展示10个页码，能够达到前5后4的效果
                 2.如果前面不够5个，后面补齐10个
                 3.如果后边不足4个，前边补齐10个

                 */

                    var begin;//开始的位置
                    var end;//结束的位置

                    //1.要显示10个页码
                    if (pb.totalPage < 10) {
                        begin = 1;
                        end = pb.totalPage;
                    } else {

                        begin = pb.currentPage - 5;
                        end = pb.currentPage + 4;
                        if (begin < 1) {
                            begin = 1;
                            end = 10;
                        }

                        if (end > pb.totalPage) {
                            end = pb.totalPage;
                            begin = end - 9;
                        }

                    }

                    for (var i = begin; i <= end; i++) {
                        var li;
                        if (pb.currentPage == i) {
                            li = '<li class="active" onclick="javascript:load(' + i + ',\'' + gname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                        } else {
                            li = '<li class="" onclick="javascript:load(' + i + ',\'' + gname + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                        }

                        lis += li;
                    }
                    var nextNum = pb.currentPage + 1;

                    if (nextNum > pb.totalPage) {
                        nextNum = pb.totalPage;
                    }
                    var nextPage = '<li onclick="javascript:load(' + nextNum + ',\'' + gname + '\')">\n' +
                        '                                        <a href="javascript:void(0)" aria-label="Next">\n' +
                        '                                            <span aria-hidden="true">&raquo;</span>\n' +
                        '                                        </a>\n' +
                        '                                    </li>';
                    lis += nextPage;
                    // alert(lis)

                    $("#pageNum").html(lis);

                    var game_list = '';

                    for (var i = 0; i < pb.list.length; i++) {
                        var game = pb.list[i];

                        // <a href="'+game.glink+' " ><button type="button" class="btn btn-primary "  name="see-btn" >查看详情</button></a>\n'
                        var li = ' <div class="thumbnail col-md-12 lb">\n' +
                            '                <div class="col-md-4">\n' +
                            '                    <img src="' + game.gimg + '">\n' +
                            '\n' +
                            '                </div>\n' +
                            '                <div class="col-md-5 text1">\n' +
                            '                    <p>' + game.gid + game.gname + '</p>\n' +
                            '                    <br/>\n' +
                            '                    <p>' + game.gintroduce + '</p>\n' +
                            '\n' +
                            '                </div>\n' +
                            '                <div class="col-md-3 btnsee">\n' +
                            '                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->\n' +
                            //<a href="javascript:void(0);" onclick="c_method()" >
                            '               <a href="javascript:void(0);" onclick="c_method()" >  <a href="' + game.glink + ' " disabled="disable" >   <button type="button" class="btn btn-primary " >查看详情</button></a></a>\n' +
                            '\n' +
                            '                </div>\n' +
                            '\n' +
                            '            </div>';
                        game_list += li;
                    }
                    // alert(game_list)
                    $("#game").html(game_list);
                    window.scrollTo(0, 0);


                })


            }


        </script>
        <!--        <script src="js/buttonclass.js"></script>-->

    </head>
    <body>
        <span id="espana"></span>
        <!--        1.页眉-->
        <!--引入头部-->
        <div id="header"></div>

        <!--        2.主体-->
        <div class="container">
            <div class="row jx">
                <img src="img/search.png">
                <span>应用列表</span>
            </div>
            <!--            列表内容-->
            <div id="game">
                <div class="thumbnail col-md-12 lb">
                    <div class="col-md-4">
                        <img src="img/javatea.png">

                    </div>
                    <div class="col-md-5 text1">
                        <p>【贪吃蛇】Snake</p>
                        <br/>
                        <p>贪吃蛇游戏是一款休闲益智类游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长</p>

                    </div>
                    <div class="col-md-3 btnsee">
                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                        <button type="button" class="btn btn-primary">查看详情</button>

                    </div>

                </div>
                <div class="thumbnail col-md-12 lb">
                    <div class="col-md-4">
                        <img src="img/javatea.png">

                    </div>
                    <div class="col-md-5 text1">
                        <p>【贪吃蛇】Snake</p>
                        <br/>
                        <p>贪吃蛇游戏是一款休闲益智类游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长</p>

                    </div>
                    <div class="col-md-3 btnsee">
                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                        <button type="button" class="btn btn-primary">查看详情</button>

                    </div>

                </div>
                <div class="thumbnail col-md-12 lb">
                    <div class="col-md-4">
                        <img src="img/javatea.png">

                    </div>
                    <div class="col-md-5 text1">
                        <p>【贪吃蛇】Snake</p>
                        <br/>
                        <p>贪吃蛇游戏是一款休闲益智类游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长</p>

                    </div>
                    <div class="col-md-3 btnsee">
                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                        <button type="button" class="btn btn-primary">查看详情</button>

                    </div>
                </div>

            </div>

            <div class="page_num_inf">
                <i></i> 共
                <span id="totalPage">12</span>页<span id="totalCount">132</span>条
            </div>

            <!--            分页-->
            <nav aria-label="Page navigation" class="daoh">
                <ul class="pagination" id="pageNum">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>


        <!--        3.页脚-->
        <!--导入底部-->
        <div id="footer"></div>

    </body>
</html>